<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<!-- Metas -->
		<title>curtains.js | Multiple planes canvas text</title>
		<meta name="description" content="Using curtains.js to enhance HTML title elements with WebGL capabilities.">
		<link rel="canonical" href="https://www.curtainsjs.com/examples/multiple-planes-canvas-text/index.html">

		<!-- Facebook OG -->
		<meta property="og:title" content="curtains.js | Multiple planes canvas text example">
		<meta property="og:type" content="website">
		<meta property="og:description" content="Using curtains.js to enhance HTML title elements with WebGL capabilities.">
		<meta property="og:url" content="https://www.curtainsjs.com/examples/multiple-planes-canvas-text/index.html">
		<meta property="og:image" content="https://www.curtainsjs.com/images/curtains-js-logo.jpg">

		<!-- Twitter card -->
		<meta name="twitter:card" content="summary_large_image">
		<meta name="twitter:site" content="@martinlaxenaire">
		<meta name="twitter:creator" content="@martinlaxenaire">
		<meta name="twitter:title" content="curtains.js | Multiple planes canvas text example">
		<meta name="twitter:description" content="Using curtains.js to enhance HTML title elements with WebGL capabilities.">
		<meta name="twitter:image" content="https://www.curtainsjs.com/images/curtains-js-logo.jpg">

		<!-- Favicon -->
		<link rel="apple-touch-icon" sizes="180x180" href="../../images/favicons/apple-touch-icon.png">
		<link rel="icon" type="image/png" sizes="32x32" href="../../images/favicons/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="16x16" href="../../images/favicons/favicon-16x16.png">
		<link rel="manifest" href="../../images/favicons/site.webmanifest">
		<link rel="mask-icon" href="../../images/favicons/safari-pinned-tab.svg" color="#202340">
		<link rel="shortcut icon" href="../../images/favicons/favicon.ico">
		<meta name="msapplication-TileColor" content="#202340">
		<meta name="msapplication-config" content="../../images/favicons/browserconfig.xml">
		<meta name="theme-color" content="#202340">

		<link href="https://fonts.googleapis.com/css?family=PT+Sans:400" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
		<link rel="stylesheet" href="style.css" type="text/css">
	</head>
	<body>
        <div id="page-wrap">

            <div id="canvas"></div>

            <a href="https://www.curtainsjs.com/" title="back to curtains.js website" id="back-to-lib-link" target="_blank">back to curtains.js website</a>

            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/examples/multiple-planes-canvas-text/js/multiple.planes.canvas.setup.js" title="Show source code" id="source-code-link" target="_blank">&lt;/ &gt;</a>

            <div id="content">

                <h1>Title effects</h1>

                <div id="planes">

                    <div class="plane-wrapper">
                        <h2 class="plane-title">First title</h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus erat eu lacus aliquet mollis. Suspendisse quis laoreet ligula. Quisque malesuada aliquam tellus, at finibus justo feugiat nec. Ut sit amet elit ut ligula tincidunt efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi convallis nunc id ipsum dictum, vel tincidunt risus vulputate. Suspendisse mattis eros purus, sed eleifend risus pharetra vitae.
                        </p>
                    </div>

                    <div class="plane-wrapper">
                        <h2 class="plane-title">Another title</h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus erat eu lacus aliquet mollis. Suspendisse quis laoreet ligula. Quisque malesuada aliquam tellus, at finibus justo feugiat nec. Ut sit amet elit ut ligula tincidunt efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi convallis nunc id ipsum dictum, vel tincidunt risus vulputate. Suspendisse mattis eros purus, sed eleifend risus pharetra vitae.
                        </p>
                    </div>

                    <div class="plane-wrapper">
                        <h2 class="plane-title">Great article title</h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus erat eu lacus aliquet mollis. Suspendisse quis laoreet ligula. Quisque malesuada aliquam tellus, at finibus justo feugiat nec. Ut sit amet elit ut ligula tincidunt efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi convallis nunc id ipsum dictum, vel tincidunt risus vulputate. Suspendisse mattis eros purus, sed eleifend risus pharetra vitae.
                        </p>
                    </div>

                    <div class="plane-wrapper">
                        <h2 class="plane-title">Last title</h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus erat eu lacus aliquet mollis. Suspendisse quis laoreet ligula. Quisque malesuada aliquam tellus, at finibus justo feugiat nec. Ut sit amet elit ut ligula tincidunt efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi convallis nunc id ipsum dictum, vel tincidunt risus vulputate. Suspendisse mattis eros purus, sed eleifend risus pharetra vitae.
                        </p>
                    </div>

                </div>


            </div>
        </div>


		<script src="js/multiple.planes.canvas.setup.js" type="module"></script>

		<!-- Global site tag (gtag.js) - Google Analytics -->
		<script async src="https://www.googletagmanager.com/gtag/js?id=UA-141413267-1"></script>
		<script>
			window.dataLayer = window.dataLayer || [];
			function gtag(){dataLayer.push(arguments);}
			gtag('js', new Date());

			gtag('config', 'UA-141413267-1');
		</script>

	</body>
</html>
